仿真计算器
名称：仿windows计算器
功能：
- 实现单击按钮录入数字
- 实现基础四则运算功能，并添加必要的异常处理，例如，除数为0
- 实现小数点功能并添加异常处理：小数点只能出现一次
- 实现正负号功能
- 实现退位功能，已经是最后一位时，显示框显示为零
- 清屏功能
使用的知识点：
- 利用大量的自定义函数实现业务逻辑
- 灵活运用事件及事件处理
- 培养异常处理的编程方法
- 培养并实践利用不同思路实现编程
综合练习的目的：
- 将css、html和js有效的进行技术组合，实现业务功能
- 锻炼和培养编程思想，解决问题的能力和方法
- 锻炼和培养多种编程思路，完成预先设定的目标
< body onload=”ff2()” >
function init()
isNaN()
一个函数接收一个参数，该参数可以是任意类型，而 函数会帮我们确定这个参数是否”不是数值”；isNaN()在接收到一个值之后，会尝试将这个值转换为数值，如果能转换成功则返回false，否则返回true
添加js的时候 不要忘了三个地方
① < head >中的引用
< script type=”text/javascript” src=”mooc.js”>< /script>② body内要引用自动化加载
< body onload=”init(),init_mooc()” >③ id一定要提名
< input type=”button” value=”m” name=”” id=”imooc”/>
☆☆低级写法☆☆
<body>
<input type="button" value="点我" id="btn1" onlick="ff1()"
</body>
function ff1(){
alter("我是ff1的输出结果")
}
--------------------------------------------------
★★高级写法★★
<body onload="ff1(),ff2()"> 自动初始化 加载 页面刷新
<input type="button" value="点我" id="btn1">
<input type="button" value="test2" id="btn2">
</body>
function ff2(){
document.getElementById("btn1").onclick = funciton(){
alter("我是ff2的输出结果");
}
}
calc.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="calc.css" />
<script type="text/javascript" src="calc.js"></script>
<script type="text/javascript" src="imooc.js"></script>
</head>
<body onload="init(),init_mooc()"> 初始化 加载 页面刷新
<div id="div1">
<form action="">
<div id="div2">
<input type="text" name="num" id="num" />
</div>
<div id="div3">
<input type="button" value="c" name="" id="" />
<input type="button" value="←" name="" id="" />
<input type="button" value="+/-" name="" id="" />
<input type="button" value="/" name="" id="" />
<input type="button" value="1" name="" id="n1" />
<input type="button" value="2" name="" id="" />
<input type="button" value="3" name="" id="" />
<input type="button" value="*" name="" id="" />
<input type="button" value="4" name="" id="" />
<input type="button" value="5" name="" id="" />
<input type="button" value="6" name="" id="" />
<input type="button" value="-" name="" id="" />
<input type="button" value="7" name="" id="" />
<input type="button" value="8" name="" id="" />
<input type="button" value="9" name="" id="" />
<input type="button" value="+" name="" id="" />
<input type="button" value="0" name="" id="" />
<input type="button" value="." name="" id="" />
<input type="button" value="=" name="" id="" />
<input type="button" value="m" name="" id="imooc" />
</div>
</form>
</div>
</body>
</html>
calc.css
*{
margin: 0px;
padding: 0px;
} //全意是：引用了这个定义的所有控件的内外边距都为0 不使用默认间距 使用自定义
div{
width: 170px;
}
#div1{
top: 60px;
left: 100px;
position: absolute;
}
input[type="button"]{
width: 30px;
margin-right: 5px;
margin-top: 5px;
}
input[type="text"]{
width: 147px;
text-align: right;
background-color: white;
border: 1px solid;
padding-right: 5px;
/* content-box 延伸 border-box 用已存在的空间增加边距 */
box-sizing: border-box;
}
/* 浮动的伪类 */
input[type="button"]:hover{
background-color: red;
border: 1px solid;
}
calc.js
function init(){
var num = document.getElementById("num"); //得到文本框本身
num.value=0;
num.disabled="disabled"; //禁用文本框输入
/* var n1 = document.getElementById("n1");
n1.onclick=function(){
alert("123"); } */
//获取所有的input
var objButton = document.getElementsByTagName("input");
var btn_num1;
var fh; //符号
for(var i=0;i<objButton.length;i++){
objButton[i].onclick=function(){
if(isNumber(this.value)){
//文本框以前的值+单击的数字 此时前面的num.value是上面的document
// num.value=(num.value+this.value)*1;
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
// alert("fei");
var btn_num=this.value;
switch (btn_num){
case "+": //↓ psrseInt(整数)转换为Number(整数+小数)
btn_num1=Number(num.value);
num.value=null;
fh="+";
break;
case "-":
btn_num1=Number(num.value);
num.value=null;
fh="-";
break;
case "*":
btn_num1=Number(num.value);
num.value=null;
fh="*";
break;
case "/":
btn_num1=Number(num.value);
num.value=null;
fh="/";
break;
case ".": //只能单击一次
num.value=dec_number(num.value);
break;
case "←":
num.value=back(num.value);
break;
case "c":
num.value="0";
break;
case "+/-":
num.value=sign(num.value);
break;
case "=":
switch(fh){
case "+":
num.value=btn_num1+num.value*1;
break;
case "-":
num.value=btn_num1-num.value*1;
break;
case "*":
num.value=btn_num1*num.value*1;
break;
case "/":
//文本框内容默认为字符类型
if(Number(num.value)==0){
alert("除数不能为0");
num.value=0;
}else{
num.value=btn_num1/num.value*1;
}
break;
}
break;
}
}//用匿名函数给每个按钮进行事件添加
//this单击是谁就是谁 objButton[i]]
}
}
}
//正负号
function sign(n){
if(n.indexOf("-")==-1){
n="-"+n;
}else{//从非第一个字符开始
n=n.substr(1,n.length);
}
// n=Number(n)*-1;
return n;
}
//退位键
function back(n){//退位键
/*if(!isNull(n)){//如果不等于空
n=n.substr(0,n.length-1);//字符串截取到总长度减一
}else{
n=0;
}*/
n=n.substr(0,n.length-1);
if(isNull(n)){
n=0;
}
return n;
}
//小数点
function dec_number(n){ //indexof 查找某一个字符是否存在[不存在返回-1
if (n.indexOf(".")==-1){ //小数点不存在
n = n + ".";
}
return n;
}
//验证文本框是否为空或者0
function isNull(n){
if(n=="0" || n.length==0){
return true;
}else{
return false;
}
}
function isNumber(n){
//isNaN不能转换为数字:true；可以转换成数字是false
if(isNaN(n)==false){
return true;//参数n是数字
}else{
return false;//参数n不是数字
}
//或者return !isNaN(n);
//如果n是数字 isNaN为false
}
/*
function num_1_click(){
var num = document.getElementById("num");
var n = num.value;
// if(n=="0"){n="1";}
//else{n=n+"1"};//字符串拼接
n=n+"1";//↓↓ *1 影式转换成数值 然后前导零省略
document.getElementById("num").value=n*1;
*/
imooc.js [m键的跳转]
function init_mooc(){
document.getElementById("imooc").onclick=function(){
window.location.href="http://www.imooc.com";
}
}